<template>
    <div class="view-map">
        <div class="view-map-header">
            <div>
                机构数量
                <p>47</p>
            </div>
            <div>
                用户数量
                <p>6670</p>
            </div>
        </div>
        <div id="viewMap"></div>
    </div>
</template>

<script>
    import { Scene, LineLayer, MarkerLayer, Marker } from '@antv/l7';
    import { CountryLayer } from '@antv/l7-district';
    import { Mapbox } from '@antv/l7-maps';
    import mockData from "./mockData";
    export default {
        name: "map",
        mounted() {
            const scene = new Scene({
                id: 'viewMap',
                map: new Mapbox({
                    pitch: 50,
                    style: 'blank',
                    center: [110.19382669582967, 50.258134],
                })
            });
            scene.setMapStatus({ dragEnable: false, zoomEnable: false});
            scene.on('loaded', () => {
                new CountryLayer(scene, {
                    data: [],
                    joinBy: [ 'NAME_CHN', 'name' ],
                    depth: 1,
                    provinceStroke: '#41afd8',
                    cityStroke: '#fff',
                    cityStrokeWidth: .5,
                    cityStrokeOpacity: 0.18,
                    label: {
                        enable: false
                    },
                    fill: {
                        color: {
                            field: 'NAME_CHN',
                            values: [
                                '#2385b7',
                                '#27b1de',
                                '#216ca3',
                                '#25a2d1',
                                '#2795c6',
                                '#2597c8',
                                '#2173a8',
                                '#20689f',
                                '#29b4e1',
                                '#216199',
                                '#25a2d1',
                                '#2795c6',
                                '#2597c8',
                                '#2173a8',
                                '#20689f',
                                '#29b4e1',
                                '#216199',
                            ]
                        }
                    },
                    popup: {
                        enable: false,
                    }
                });
                fetch('./line.text')
                    .then(res => res.text())
                    .then(data => {
                        const layer = new LineLayer({
                            blend: 'normal'
                        })
                            .source(data, {
                                parser: {
                                    type: 'csv',
                                    x: 'lng1',
                                    y: 'lat1',
                                    x1: 'lng2',
                                    y1: 'lat2'
                                }
                            })
                            .size(1)
                            .shape('arc3d')
                            .color('#feffd2')
                            .animate({
                                enable: true,
                                interval: 0.3,
                                trailLength: 0.5,
                                duration: .7
                            })
                            .style({
                                opacity: 1
                            });
                        scene.addLayer(layer);
                    });
                const markerLayer = new MarkerLayer();
                for (let i = 0; i < mockData.length; i++) {
                    const el = document.createElement('label');
                    el.className = 'map-label-class';
                    el.style.background = '#feffd2';
                    el.style.borderColor = '#feffd2';
                    el.style.animationDelay = Math.ceil(Math.random()*10) * 100 + 'ms';
                    const marker = new Marker({
                        element: el
                    }).setLnglat({ lng: mockData[i].lng, lat: mockData[i].lat });
                    markerLayer.addMarker(marker);
                }
                scene.addMarkerLayer(markerLayer);
            });
        }
    }
</script>

<style scoped lang="less">
    .l7-ctrl-logo{
        display: none;
    }
    .view-map{
        display: flex;
        flex-direction: column;
        &-header{
            display: flex;
            justify-content: space-evenly;
            div{
                font-size: 26px;
                color: #fff;
                text-align: left;
                p{
                    color: rgb(250, 173, 20);
                    font-size: 46px;
                    padding: 0;
                    margin: 0;
                    line-height: 1;
                }
            }
        }
    }
#viewMap{
    position: relative;
    flex: 1;
    transform: scale(1.4) translateX(15px);
}
</style>
<style>
.map-label-class{
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation: ease-in-out 2s zoomInMove infinite;
    box-shadow: #ffdc63 0px 0px 1px;
}
@keyframes zoomInMove {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}
</style>
